<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>修改支付密码</title>
	<link rel="stylesheet" type="text/css" href="__API__/lib/css/swiper.min.css">
	<link rel="stylesheet" type="text/css" href="__API__/lib/css/mui.css?v=1">
	<link rel="stylesheet" type="text/css" href="__API__/lib/css/mobileSelect.css" />
	<link rel="stylesheet" href="__API__/lib/css/style.css">
	<script type="text/javascript" src="__API__/lib/js/jquery-1.11.0.min.js"></script>
	<script type="text/javascript" src="__API__/lib/js/mui.js"></script>
	<script src="__API__/lib/js/mobileSelect.js" type="text/javascript" charset="utf-8"></script>
	<script src="__API__/lib/js/city.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" src="__API__/lib/js/swiper.min.js"></script>
	<script type="text/javascript" src="__API__/lib/js/vue.min.js"></script>
	<script type="text/javascript" src="__API__/lib/js/common.js"></script>
	<script type="text/javascript" src="__API__/lib/js/index.js"></script>
	<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script></head>

<body>
<div class="page_box bg_color" id="app" style="min-height: 100vh;">
	<div class="bank_cont">
		<div class="bank_box">
			<ul class="bank_list update_list">
				<li>
					<span>支付密码</span>
					<input type="password" placeholder="输入新支付密码" v-model="password" />
				</li>
				<li>
					<span>重复密码</span>
					<input type="password" placeholder="确认密码" v-model="confirm_pasword" />
				</li>
				<li>
					<span style="color: #333">手机号</span>
					<input type="text" placeholder="手机号" v-model="mobile" readonly />
				</li>

				<li>
					<span>验证码</span>
					<input type="number" placeholder="手机验证码" v-model="code" />
					<button class="yzmcode" @click="getCode()" :disabled="disadles">{{massage}}</button>
				</li>

			</ul>
		</div>
		<div class="blue_btn bank_btn" @click="onSubmit()">确认修改</div>
	</div>
</div>
<script>
	var app = null;
	app = new Vue({
		el: '#app',
		data: {
			username: '',
			password: '',
			confirm_pasword: '',
			code: '',
			time: 60,
			mobile:'',
			disadles: false,
			massage: '获取验证码'
		},
		created: function() {
			var that = this;
			common.ajax("{:url('Member/my')}",{token:localStorage.getItem('token')} , function(res) {
				//common.showToast(res.msg);
				that.mobile = res.data.mobile;

				// that.getData(searchValue);
			})
		},
		methods: {
			goDetail(url) {
				common.openUrl(url)
			},
			//获取验证码
			getCode() {
				let that = this;
				let setInter = setInterval(() => {
					that.time--;
					if (that.time <= 0) {
						that.massage = "获取验证码";
						that.disadles = false;
						clearInterval(setInter);
					} else {
						that.massage = "重新获取(" + that.time + ")";
						that.disadles = true;
					}
				}, 1000);
				axios
						.post('{:url("Member/captcha")}',{type:'update_pay_password',mobile:that.mobile})
						.then(res=>{
							if(res.data.code != 200){
								return common.alert(res.data.msg,' ')
							}else{
								return  common.showToast(res.data.msg,' ');
							}
						})
			},
			onSubmit() {
				let that = this;
				if(!that.password ||!that.confirm_pasword){
					return common.alert('请输入密码',' ');
				}
				if(that.password != that.confirm_pasword){
					return common.alert('两次密码不一致，请重新输入！',' ');
				}
				let data = {
					token:localStorage.getItem('token'),
					mobile: that.mobile,
					pay_password: that.password,
					captcha: that.code,
				}
				common.ajax("{:url('Member/update_pay_password')}", data, function(res) {
					if (res.code == 200) {
						common.showToast(res.msg);
						setTimeout(function() {
							common.PageBack();
						}, 1000)
					}else{
						common.showToast(res.msg);
					}
				})
			}
		}
	});
</script>
</body>

</html>
